<template>
  <div id="app" class="norem-app">
    <!-- <mainNav/> -->
    <transition :name="transtionSlide"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'"
      mode="out-in">
      <keep-alive>
        <!-- <navigation> -->
        <router-view></router-view>
        <!-- </navigation> -->
      </keep-alive>
    </transition>
    <SwFooter v-if="routeNoFooter.indexOf(routeName) >= 0"></SwFooter>
  </div>
</template>

<script>
import './assets/js/iconfont-wenzheng'
import SwFooter from './components/footer.vue'
export default {
  name: 'App',
  data() {
    return {
      transtionSlide: 'slide-left',
      routeName: 'home',
      routeNoFooter: ['home', 'mine']
    }
  },
  components: {
    SwFooter
  },
  computed: {},
  watch: {
    $route(to) {
      this.routeName = to.name
    }
  },
  methods: {},
  created() {
    this.$navigation.on('forward', () => {
      this.transtionSlide = 'slide-left'
    })
    this.$navigation.on('back', () => {
      this.transtionSlide = 'slide-right'
    })
    this.$navigation.on('refresh', (to, from) => {
      console.log('refresh to', to, 'from ', from)
    })
    document.body.removeChild(document.getElementById('loading'))
  },
  mounted() {}
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  background: #fff;
}
.norem-app {
  max-width: 750px;
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
</style>
